<template>
  <div class="con">
    <el-container class="toubu">

      <div width="120px"><img src="../images/z2.jpg" class="headimg" /></div>
      <el-main class="main">
        <button @click="handleEdit">编辑</button>
        <!-- 内容 -->
        <div class="biaodan" v-if="isView">
          <el-form>
            <el-form-item label="名字：">{{ username }}</el-form-item>
            <el-form-item label="性别：">{{ sex }}</el-form-item>
            <el-form-item label="手机号码：">{{ phone }}</el-form-item>
            <el-form-item label="邮箱：">{{ email }}</el-form-item>
            <el-form-item label="地址：">{{ address }}</el-form-item>
            <el-form-item label="简介：">{{ readme }}</el-form-item>
          </el-form>
        </div>

        <!--表单-->
        <div class="biaodan" v-else>
          <el-form :model="userForm">
            <el-form-item label="名字：">
              <el-input v-model="username" disabled />
            </el-form-item>
            <el-form-item label="性别：">
              <el-radio-group v-model="userForm.sex">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机：">
              <el-input v-model="userForm.phone" />
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="userForm.email" />
            </el-form-item>
            <el-form-item label="地址：">
              <el-input v-model="userForm.address" />
            </el-form-item>
            <el-form-item label="简介：">
              <el-input v-model="userForm.readme" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { storeToRefs } from 'pinia';
import { reactive, ref } from 'vue';
import useUserStore from '../store/module/user.js';

const userStore = useUserStore();
const {
  username,
  sex,
  email,
  address,
  phone,
  readme
} = storeToRefs(userStore)

const isView = ref(true)
const userForm = reactive({
  sex,
  phone,
  email,
  address,
  readme
})

const handleEdit = () => {
  isView.value = !isView.value;
}

const onSubmit = () => {
  ElMessage.success('保存成功！');
  isView.value = !isView.value;
}

</script>
<style scoped>
.biaodan {
  margin: 10px auto;
  width: 100%;
}

.con {
  text-align: center;
}

.toubu {
  margin: 0px auto;
  width: 40%;
}
</style>
